<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="searchListEvent" @click="(e)=>{this.queryShow=e}"
      @searchReset="searchReset()">
      <!--文本框-->
      <!-- <el-col :span="6">
        <el-form-item label="错误码">
          <el-input v-model="dataForm.exNum" placeholder="错误码" clearable></el-input>
        </el-form-item>
      </el-col> -->
      <el-col :span="6">
        <el-form-item label="请求URL">
          <el-input v-model="dataForm.requestUri" placeholder="请求URL" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="请求方式">
          <el-select v-model="dataForm.requestMethod" :placeholder="'请求方式'" clearable>
            <el-option v-for="(item, index) in requestMethodList" :key="index" :label="item.label" :value="item.val"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="操作IP">
          <el-input v-model="dataForm.ip" placeholder="操作IP" clearable></el-input>
        </el-form-item>
      </el-col>
      <template slot="other">
        <el-col :span="12">
          <el-form-item label="时间段">
            <el-date-picker v-model="dateTimeRange" :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              time-arrow-control clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
      </template>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="searchListEvent" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize remote-sort @sort-change="dataListSortChangeHandle"
          class="vxe-table-element" max-height="auto">
          <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
          <!-- <vxe-table-column field="exNum" title="logError.exNum" width="120" align="center"></vxe-table-column> -->
          <vxe-table-column field="requestUri" title="logError.requestUri" sortable></vxe-table-column>
          <vxe-table-column field="requestMethod" title="logError.requestMethod" sortable width="100" align="center">
          </vxe-table-column>
          <vxe-table-column field="requestParams" title="logError.requestParams" width="150"></vxe-table-column>
          <vxe-table-column field="ip" title="logError.ip" width="120" align="center"></vxe-table-column>
          <vxe-table-column field="userAgent" title="online.Browser">
            <template slot-scope="scope">
              {{ userAgent(scope.row.userAgent).browser }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="userAgent" title="online.OS">
            <template slot-scope="scope">
              {{ userAgent(scope.row.userAgent).os }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="createDate" title="logError.createDate" sortable width="140"></vxe-table-column>
          <vxe-table-column title="handle" width="100">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" size="small" @click="infoHandle(scope.row.errorInfo)">{{
                $t('logError.errorInfo') }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { fnUserAgent } from '@/utils/ua'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/sys/log/error/page',
        getDataListIsPage: true,
        exportURL: '/sys/log/error/export'
      },
      requestMethodList: [{ val: 'POST', label: 'POST' }, { val: 'GET', label: 'GET' }, { val: 'DELETE', label: 'DELETE' }, { val: 'PUT', label: 'PUT' }],
      dateTimeRange: [],
      dataForm: {
        exNum: ''
      }
    }
  },
  created () {
    let params = this.$route.params
    if (params) {
      this.dataForm = {
        ...this.dataForm,
        ...params.row
      }
      this.dateTimeRange = params.dateTimeRange
    }
  },
  activated () {
    this.searchListEvent()
  },
  methods: {
    searchListEvent () {
      this.dataForm.createDateBegin = ''
      this.dataForm.createDateEnd = ''
      if (this.dateTimeRange && this.dateTimeRange.length > 0) {
        this.dataForm.createDateBegin = this.dateTimeRange[0]
      }
      if (this.dateTimeRange && this.dateTimeRange.length > 1) {
        this.dataForm.createDateEnd = this.dateTimeRange[1]
      }
      this.page = 1
      this.getDataList()
    },
    // 异常信息
    infoHandle (info) {
      this.$alert(info, this.$t('logError.errorInfo'), {
        customClass: 'mod-sys__log-error-view-info'
      })
    },
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    }
  }
}
</script>

<style lang="scss">
.el-message-box.mod-sys__log-error-view-info {
  width: 80%;
  height: 600px;
}
.mod-sys__log-error-view-info .el-message-box__content {
  height: 510px;
  overflow-y: auto;
}
</style>
